<template>
  <div id="dl">
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <h2 id="zi"><br />登录</h2>
      <el-row>
        <el-col :span="1"> </el-col>
        <el-col :span="19">
          <el-form-item label="账户 :" prop="username" style="margin-top: 16px">
            <el-input v-model="ruleForm.username"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4"> </el-col>
      </el-row>

      <el-row>
        <el-col :span="1"> </el-col>
        <el-col :span="19">
          <el-form-item label="密码 :" prop="password">
            <el-input type="password" v-model="ruleForm.password"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4"> </el-col>
      </el-row>

      <el-form-item>
        <el-button
          style="margin-left: -95px"
          type="primary"
          @click="submitForm('ruleForm')"
          >登录</el-button
        >
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
    <el-alert
      v-if="jg"
      title="账户或密码不正确！"
      type="error"
      show-icon
    ></el-alert>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ruleForm: {
        username: "",
        password: "",
      },
      jg: false,
      rules: {
        username: [
          { required: true, message: "账户不为空！", trigger: "blur" },
          {
            min: 3,
            max: 8,
            message: "账户长度在 3 到 8 个字符",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "密码不能为空!", trigger: "blur" },
          {
            min: 3,
            max: 8,
            message: "密码长度在 3 到 8 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const loading = this.$loading({
            lock: true,
            text: "Loading",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.7)",
          });
          this.axios
            .post("/rear/User/login", this.ruleForm)
            .then((res) => {
              if (res.data) {
                setTimeout(() => {
                  sessionStorage.setItem("user", JSON.stringify(res.data));
                  this.$store.commit("load", res.data);
                  this.$router.replace("/index/hello");
                  loading.close();
                }, 2000);
              } else {
                loading.close();
                this.$message.error("账户或密码不正确！");
              }
            })
            .catch((res) => {
              loading.close();
              this.$message.error("服务器被外星人偷走了！请联系管理员！");
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style scoped>
#dl {
  text-align: center;
  width: 420px;
  height: 330px;
  margin-top: 16%;
  margin-left: 38%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
</style>